<template>
  <div id="app">
    <!-- 导航栏 -->
    <van-nav-bar class="header">
      <!-- 自定义右侧插槽 -->
      <template #right>
        <van-button
          @click="$router.push('/search')"
          icon="search"
          round
          type="primary"
          class="search_btn"
          >搜索</van-button
        >
      </template>
      <!-- 自定义左侧插槽 -->
      <template #left>
        <div class="logo"></div>
      </template>
    </van-nav-bar>
    <!-- tab栏，显示频道 -->
    <van-tabs v-model="active" class="banner">
      <!-- 滚动标签栏 -->
      <!-- 把获取的数据渲染到页面上 -->
      <van-tab v-for="item in userChannel" :title="item.name" :key="item.id">
        <!-- 新闻列表 -->
        <!-- 如果新闻列表的代码都写在home页，会导致home页代码量太大，可读性差。建议封装成组件 -->
        <ArticleList :channel_id="item.id"></ArticleList>
      </van-tab>
      <!-- 设置一个用来放右侧图标的div盒子 -->
      <van-icon name="wap-nav" class="icon" @click="channel"></van-icon>
    </van-tabs>
    <!-- 频道栏弹出层 -->
    <!-- 对于封装的组件而言，$event不是事件对象，而是子组件传过来的值
    在本项目中，这个$event就是子组件产地过来的index(下标) -->
    <van-action-sheet title="频道管理" v-model="sheetShow">
      <!-- <ArticleChannel
        :editChannel="userChannel"
        :channelAll="channelAll"
        :value="active"
        @input="active = $event"
        @close="sheetShow = false"
      ></ArticleChannel> -->

      <!-- 在组件中，v-model相当于是语法糖
      当我们对组价写了一个 v-model="数据" 时，相当于默认帮我们生成了 :value="数据" 以及 @input="数据=$event" 这个v-model语法糖有先决条件，就是父传子要有:value="数据" 子传父要有:input="数据" -->
      <ArticleChannel
        :editChannel="userChannel"
        :channelAll="channelAll"
        v-model="active"
        @close="sheetShow = false"
      ></ArticleChannel>
    </van-action-sheet>
  </div>
</template>

<script>
import { getChannel } from '@/utils/storage.js'
import ArticleChannel from './particulars/article-channel.vue'
// 导入获取用户频道接口
import { channelsAPI, channelAllAPI } from '@/api/index.js'
// 导入新闻列表组件
import ArticleList from './articleList/index.vue'
export default {
  components: { ArticleList, ArticleChannel },
  data () {
    return {
      userChannel: [],
      sheetShow: false,
      channelAll: [],
      active: 0 // 跟tab栏选中的索引双向绑定
    }
  },
  async created () {
    // 判断用户是否登录
    /* if (this.$store.state.tokenObj.token) {
      // 代码进到这里说明用户登录了
      // 发起请求，获取用户频道数据
      let res = await channelsAPI()
      // console.log(res)
      // 把获取到的数据赋值给userChannel数组
      this.userChannel = res.data.data.channels
    } else {
      // 代码进到这里说明没有用户登录
      let res = getChannel()
      if (res) {
        this.userChannel = res
      } else {
        let res = await channelsAPI()
        this.userChannel = res.data.data.channels
      }
    } */

    // 优化代码
    // 先尝试从本地存储获取频道数据
    // 需要发起请求的情况要么是没登录，要么没有本地存储
    if (!getChannel() || this.$store.state.tokenObj.token) {
      let res = await channelsAPI()
      this.userChannel = res.data.data.channels
    } else {
      // 能来到这里代表没登录且本地存储有数据
      this.userChannel = getChannel()
    }
    // 发起请求，获取所有频道数据
    let res2 = await channelAllAPI()
    // console.log(res2);
    this.channelAll = res2.data.data.channels
  },
  methods: {
    // 点击右上角频道图标时触发
    channel () {
      this.sheetShow = true
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
  width: 116px;
  height: 100%;
  // 因为@在less语法中有特殊含义，如果想使用@节约路径内容，需要在前面加上~进行转义
  background: url(~@/assets/logo.4653c8be.png) no-repeat center / contain;
}
.search_btn {
  width: 100px;
  height: 30px;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  .van-icon-search {
    color: white;
  }
}
.banner {
  position: relative;
  ::v-deep .van-tabs__wrap {
    width: 345px;
    margin-top: 46px;
  }
  ::v-deep .van-tabs__nav {
    padding-bottom: 12px;
  }
  .icon {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    padding: 5px 2px 0 0;
    font-size: 32px;
    background-color: #fff;
    z-index: 999;
  }
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}
</style>
